<template>
  <!-- 顶部导航栏 -->
  <div class="topbar">
    <div class="logo"><img src="../assets/logo.png" class="logo"></div>
    <div class="menu">
      <ul class="titlebar">
        <li class="liactive" :class="toli === 1 && 'active'" @click="change(1)">首页</li>
        <li class="liactive" :class="toli === 2 && 'active'" @click="change(2)">产品展示</li>
        <li class="liactive" :class="toli === 3 && 'active'" @click="change(3)">关于曲姣</li>
        <li class="liactive" :class="toli === 4 && 'active'" @click="change(4)">健康园地</li>
        <li class="liactive" :class="toli === 5 && 'active'" @click="change(5)">会员中心</li>
        <li class="liactive" :class="toli === 6 && 'active'" @click="change(6)">联系我们</li>
      </ul>
    </div>
    <div class="phone">
      <a href="https://qujiao.tmall.com/" target="_blank" style="text-decoration:none">
        <div class="tianmao">
          <div>
            <img src="../assets/homepage/tm.png" class="tmpic">
          </div>
          <span>天猫旗舰店</span>
        </div>
      </a>
      <!-- <div class="tianmao" style="opacity: 0">
        <div>
          <img src="../assets/homepage/jd.png" class="tmpic">
        </div>
        <span>京东旗舰店</span>
      </div> -->
    </div>
  </div>
  <!-- 顶部导航栏 -->
</template>
<script>
  export default {
    mounted() {
      // this.activeli()
    },
    props: {
      toli: Number
    },
    data() {
      return {}
    },
    methods: {
      change(i) {
        Bus.$emit('topbar', i)
      }
    }
  }
</script>

<style scoped lang="scss">
  .topbar {
    display: flex;
    justify-content: space-between;
    height: 60px;
    @media screen and (max-width: 640px) {
      height: 160px;
    }
  }

  .logo {
    margin-top: 7px;
    // width: 100px;
    @media screen and (max-width: 640px) {
      padding: 0 20px;
    }
  }

  .menu {
    height: 100%;
    padding-top: 15px;
    margin-left: 30px;

    .titlebar {
      list-style: none;
      position: relative;
      margin: 0;
      padding: 0;
      &::after {
        clear: both;
        content: '';
        display: block;
        width: 0;
        height: 0;
        visibility: hidden;
      }

      li {
        margin-top: 10px;
        float: left;
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-bottom: 4px solid transparent;
        transition: all .2s linear;
        &:hover {
          /* border-bottom-color: #D0A62A; */
          cursor: pointer;
          /* background: #d0a62a; */
          color: #D0A62A;
        }
      }

      @media screen and (max-width: 480px) {
        li {
          font-size: 15px;
        }
      }
    }

    @media screen and (max-width: 1080px) {
      margin-left: 10px;
      .titlebar > li {
        width: 100px;
      }
    }

    @media screen and (max-width: 640px) {
      position: absolute;
      top: 60px;
      left: 0; right: 0;
      height: 100px;
      margin: 0;
      width: 100%;
      .titlebar > li {
        width: 33%;
        height: 35px;
        border-bottom-width: 2px;
        transition-duration: 0.2s;
        &:nth-child(-n+3) {
          margin-top: 5px;
        }
      }
    }
  }
  /* 	.li_active {
		background: #d0a62a;
		color: white;
	} */

  .active {
    color: #D0A62A;
  }

  .phone {
    font-size: 14px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 160px;
    height: 70px;
    > div {
      float: left;
    }
  }

  .tianmao {
    align-items: center;
    display: flex;
    margin: 27px 0 0 20px;
    @media screen and (max-width: 480px) {
      margin-left: 12px;
      &:first-child {
        margin-left: 6px;
      }
    }
  }

  .tianmao:hover {
    cursor: pointer;
  }

  .tmpic {
    width: 34px;
  }

  .xiala {
    border-bottom: 3px solid #02B997;
    opacity: 0;
    transition: all .2s linear;
  }

  .xiala>li {
    color: black;
    background: white;
    transition: all .2s linear;
  }

  .aboutQJ:hover {
    z-index: 11;
  }

  .xiala>li:hover {
    color: white;
    background: #02B997;
  }

  .aboutQJ:hover .xiala {
    opacity: 1;
  }

  .tianmao>span {
    color: white;
    border-radius: 20px;
    display: block;
    padding: 5px 12px;
    font-size: 12px;
    background-color: #D0A62A;
    margin-left: -13px;
    z-index: -1;
  }
</style>
